<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' class="pos-order" id="order-list">
        <el-tabs class="div-tab">
          <el-tab-pane label="点餐">
            <el-table border :data="tableData" style="width:100%;">
              <el-table-column prop="goodsName" label="商品名称" header-align="center"></el-table-column>
              <el-table-column prop="count" label="数量" header-align="center"></el-table-column>
              <el-table-column prop="price" label="金额" header-align="center"></el-table-column>
              <el-table-column label="操作" fixed="right" header-align="center">
                <!-- 原文为scope="scope" 编译时警告查询vue的API后发现2.5版本以后被slot-scope="scope"替代 -->
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="reduceOrderList(scope.row)">减</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">加</el-button>
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                  <!-- scope.row 相当于传入了当前行数据 这是个坑 -->
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <small>数量:</small> {{totalCount}}  &nbsp;&nbsp;&nbsp;&nbsp; <small>金额:</small> {{totalMoney}}元
            </div>
            <div class="div-btn">
              <el-button type="warning" @click="hangUp">挂单</el-button>
              <el-button type="danger" @click="delAllGoods">删除</el-button>
              <el-button type="success" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">
            <div>
                <div class="title">常用商品</div>
                <el-table border :data="hangUpData" style="width:100%;">
                      <el-table-column prop="goodsName" label="商品名称" header-align="center"></el-table-column>
                      <el-table-column prop="count" label="数量" header-align="center"></el-table-column>
                      <el-table-column prop="price" label="金额" header-align="center"></el-table-column>
                </el-table>
                <div class="totalDiv">
                    <small>数量:</small> {{hangUpCount}}  &nbsp;&nbsp;&nbsp;&nbsp; <small>金额:</small> {{hangUpMoney}}元
                </div>
                <div class="div-btn">
                    <el-button type="success" @click="hangUpCheckout">结账</el-button>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="外卖"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="oftnd-goods-list">
            <ul>
              <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}</span>
                <span class="o-price">¥{{goods.price}}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class="cookList">
                  <li v-for="goods in type0Goods" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <div class="foodName" style="margin-top:10px;">{{goods.goodsName}}</div>
                    <div class="foodPrice">￥{{goods.price}}元</div>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="零食">
                <ul class="cookList">
                  <li v-for="goods in type1Goods" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <div class="foodName" style="margin-top:10px;">{{goods.goodsName}}</div>
                    <div class="foodPrice">￥{{goods.price}}元</div>
                  </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="饮料">
                <ul class="cookList">
                  <li v-for="goods in type2Goods" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <div class="foodName" style="margin-top:10px;">{{goods.goodsName}}</div>
                    <div class="foodPrice">￥{{goods.price}}元</div>
                  </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐">
                <ul class="cookList">
                  <li v-for="goods in type3Goods" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <div class="foodName" style="margin-top:10px;">{{goods.goodsName}}</div>
                    <div class="foodPrice">￥{{goods.price}}元</div>
                  </li>
                </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      tableData: [],
      hangUpData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0,
      hangUpCount: 0,
      hangUpMoney: 0
    };
  },
  methods: {
    // 添加商品
    addOrderList(goods) {
      // 商品是否已经存在订单列表中
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }
      // 根据判断的值写业务逻辑
      if (isHave) {
        // 改变列表中商品的数量
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      // 计算汇总  金额和数量
      this.getAllMoney();
    },
    // 减少商品
    reduceOrderList(goods) {
      // 商品是否已经存在订单列表中
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }
      // 根据判断的值写业务逻辑
      if (isHave) {
        // 改变列表中商品的数量
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        if(arr[0].count > 1){
            arr[0].count--;
        }else{
          this.delSingleGoods(goods);
        }
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      // 计算汇总  金额和数量
      this.getAllMoney();
    },
    //删除单个商品
    delSingleGoods(goods) {
      //console.log(goods);
      this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
      this.getAllMoney();
    },
    //汇总数量和金额
    getAllMoney() {
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData) {
        this.tableData.forEach(element => {
          this.totalCount += element.count;
          this.totalMoney = this.totalMoney + element.price * element.count;
        });
      }
    },
    //删除所有商品
    delAllGoods() {
      this.tableData = [];
      this.totalCount = 0;
      this.totalMoney = 0;
    },
    // 结账
    checkout() {
      if (this.totalCount != 0) {
        this.$confirm("你是认识龙哥吗?", "提示", {
          confirmButtonText: "认识",
          cancelButtonText: "不认识",
          type: "warning"
        })
          .then(() => {
            this.tableData = [];
            this.totalCount = 0;
            this.totalMoney = 0;
            this.$message({
              type: "success",
              message: "免单!"
            });
          })
          .catch(() => {
            this.tableData.forEach(element => {
              element.price = 10000;
            });
            this.$message({
              type: "error",
              message: "连龙哥都不认识,涨价了...."
            });
            this.getAllMoney();
          });
      } else {
        this.$message.error("您还没有选择项品,不需结账！");
      }
    },
    hangUp() {
      this.hangUpData = this.tableData;
      this.tableData = [];
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.hangUpData) {
        this.hangUpData.forEach(element => {
          this.hangUpCount += element.count;
          this.hangUpMoney = this.hangUpMoney + element.price * element.count;
        });
      }
    },
    hangUpCheckout() {
      if (this.hangUpData != 0) {
        this.hangUpData = [];
        this.hangUpCount = 0;
        this.hangUpMoney = 0;
        this.$message({
          message: "结账成功，感谢你又为店里出了一份力!",
          type: "success"
        });
      } else {
        this.$message.error("您还没有选择项品,不许结账！");
      }
    }
  },
  created() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        //console.log(response);
        this.oftenGoods = response.data;
      })
      .catch(error => {
        //console.log(error);
        alert("网络错误，不能访问");
      });
    //读取分类商品列表
    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(response => {
        console.log(response);
        //this.oftenGoods=response.data;
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
  },
  mounted() {
    // 获取屏幕高度 赋值
    var orderHeiht = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeiht + "px";
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0ccda;
}
.div-tab {
  margin-left: 5px;
}
.div-btn {
  margin-top: 10px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}
.oftnd-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  cursor: pointer;
}
.o-price {
  color: #58b7ff;
}
.goods-type {
  /* 清除浮动 */
  clear: both;
  margin-left: 5px;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 15px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.totalDiv {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #d3dce6;
}
</style>
